<route lang="json5" type="page">
{
  style: { navigationBarTitleText: '找回密码' },
}
</route>

<template>
  <view class="flex flex-col items-center justify-start px-4 py-8 full-screen-120px bg-gray-50">
    <!-- 顶部标题 -->
    <view class="w-full text-left mb-12">
      <text class="text-2xl font-bold text-gray-800">找回密码</text>
    </view>

    <!-- 表单区域 -->
    <view class="w-full space-y-6">
      <!-- 手机号输入 -->
      <view class="relative">
        <input
          type="number"
          v-model="phone"
          placeholder="请输入手机号"
          class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-blue-500 outline-none"
        />
      </view>

      <!-- 验证码输入 -->
      <view class="relative flex space-x-4">
        <input
          type="number"
          v-model="verifyCode"
          placeholder="请输入验证码"
          class="flex-1 px-4 py-3 rounded-lg border border-gray-300 focus:border-blue-500 outline-none"
        />
        <button
          @tap="handleSendCode"
          :disabled="!isPhoneValid || countdown > 0"
          class="w-32 py-3 rounded-lg bg-blue-500 text-white font-medium disabled:opacity-50 disabled:cursor-not-allowed h-10 line-height-none"
        >
          {{ countdown > 0 ? `${countdown}s后重试` : '发送验证码' }}
        </button>
      </view>

      <!-- 新密码输入 -->
      <view class="relative">
        <input
          :type="showPassword ? 'text' : 'password'"
          v-model="newPassword"
          placeholder="请输入新密码"
          class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-blue-500 outline-none"
        />
        <text
          class="absolute right-4 top-1/2 transform -translate-y-1/2 text-gray-500"
          @tap="showPassword = !showPassword"
        >
          {{ showPassword ? '隐藏' : '显示' }}
        </text>
      </view>

      <!-- 确认按钮 -->
      <button
        @tap="handleSubmit"
        :disabled="!isValid"
        class="w-full py-3 rounded-lg bg-blue-500 text-white font-medium disabled:opacity-50 disabled:cursor-not-allowed"
      >
        确认修改
      </button>

      <!-- 返回登录 -->
      <navigator url="/pages/me/login/login" class="text-center text-blue-500 mt-4">
        返回登录
      </navigator>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref, computed } from 'vue'

const phone = ref('')
const verifyCode = ref('')
const newPassword = ref('')
const showPassword = ref(false)
const countdown = ref(0)

// 手机号验证
const isPhoneValid = computed(() => {
  const phoneReg = /^1[3-9]\d{9}$/
  return phoneReg.test(phone.value)
})

// 表单验证
const isValid = computed(() => {
  return isPhoneValid.value && verifyCode.value.length === 6 && newPassword.value.length >= 6
})

// 发送验证码
const handleSendCode = () => {
  if (!isPhoneValid.value) return

  // 开始倒计时
  countdown.value = 60
  const timer = setInterval(() => {
    countdown.value--
    if (countdown.value <= 0) {
      clearInterval(timer)
    }
  }, 1000)

  // TODO: 实现发送验证码逻辑
  uni.showToast({
    title: '验证码已发送',
    icon: 'success',
  })
}

// 提交修改
const handleSubmit = () => {
  if (!isValid.value) return

  // TODO: 实现密码修改逻辑
  uni.showLoading({
    title: '提交中...',
  })

  // 模拟提交请求
  setTimeout(() => {
    uni.hideLoading()
    uni.showToast({
      title: '密码修改成功',
      icon: 'success',
      success: () => {
        // 延迟跳转到登录页
        setTimeout(() => {
          uni.navigateTo({
            url: '/pages/me/login/login',
          })
        }, 1500)
      },
    })
  }, 1500)
}
</script>

<style lang="scss" scoped>
// 空样式，全部复用 UnoCSS
</style>
